<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-3.2.1.js"></script>
    <script>
        $(function() {
            var sendAjax = function() {
                $.ajax({
                    type: "get",
                    url: "http://127.0.0.1:8888/score",
                    async: true,
                    data: {
                        name: "newPage"
                    },
                    success: function(data) {
                        console.log(data);

                        var tbody = $("tbody");

                        for (var i = 0; i < data.length; i++) {
                            var tr = "<tr><td>" +
                                data[i].name +
                                "</td><td>" +
                                data[i].start + "</td><td>" + data[i].year +
                                "</td></tr>";
                            $(tr).appendTo(tbody);
                        }
                    },
                    error: function() {
                        console.log("数据接收失败")
                    }
                })

            };

            var btn = $("button");
            btn.on("click", function(e) {
                sendAjax();
            })
        })
    </script>
</head>

<body>
    <button>获取电影</button>
    <table>
        <thead>
            <tr>
                <th>名字</th>
                <th>星级</th>
                <th>年份</th>
            </tr>
        </thead>
        <tbody>
        </tbody>

    </table>

</body>

</html>